<template>
    <div class="content">
        <div id="cart-title">
            地址簿
        </div>
        <br>
        <p class="account-title">地址簿管理</p>
        <div>
            <el-table :data="deliveryInfoes"
                      stripe
                      style="width: 100%">
                <el-table-column prop="Consignee"
                                 label="收货人"
                                 width="100">
                </el-table-column>
                <el-table-column prop="DetailedAddress"
                                 label="详细地址"
                                 width="300">
                </el-table-column>
                <el-table-column prop="PhoneNumber"
                                 label="联系电话">
                </el-table-column>
                <el-table-column prop="IsDefault"
                                 label="是否默认"
                                 inline-template>
                    <el-switch v-model="row.IsDefault"
                               on-color="#13ce66"
                               off-color="#ff4949">
                    </el-switch>
                </el-table-column>
                <el-table-column prop="Id"
                                 label="操作"
                                 inline-template>
                    <div v-if="row.IsDefault===true">
                        <el-dropdown>
                            <span class="el-dropdown-link"> 
                                                                                                                                                                                                            操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                                                                                                          </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><a @click="deleteDeliveryInfo(row.Id)">删除</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else-if="row.IsDefault===false">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                                                                                                                                                                                    操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                                                                                                                                                                                  </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item><a @click="deleteDeliveryInfo(row.Id)">删除</a></el-dropdown-item>
                                <el-dropdown-item><a @click="setDefault(row.Id)">设为默认</a></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="添加地址"
                   v-model="dialogVisible"
                   size="tiny">
            <el-form :model="from"
                     :rules="rule"
                     ref="from"
                     label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="收货人"
                              prop="consignee"
                              required>
                    <el-input v-model="from.consignee"></el-input>
                </el-form-item>
                <el-form-item label="详细地址"
                              prop="detailedAddress"
                              required>
                    <el-input v-model="from.detailedAddress"></el-input>
                </el-form-item>
                <el-form-item label="联系电话"
                              prop="phoneNumber"
                              required>
                    <el-input v-model="from.phoneNumber"></el-input>
                </el-form-item>
    
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                                                                                <el-button @click="dialogVisible = false">取 消</el-button>
                                                                                <el-button type="primary" @click="submitForm('from')">确 定</el-button>
                                                                              </span>
        </el-dialog>
        <el-button class="cart-button-continue"
                   type="primary"
                   size="large"
                   @click="dialogVisible = true">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加地址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
    </div>
</template>
<script>
export default {
    data: function () {
        var checkPhoneNumber = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入联系电话 '));
            } else {
                callback();
            }
        };
        var checkConsignee = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入收货人姓名'));
            } else {
                callback();
            }
        };
        var checkDetailedAddress = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入详细地址'));
            } else {
                callback();
            }
        };
        return {
            from: {
                consignee: "",
                detailedAddress: "",
                phoneNumber: ""
            },
            rule: {
                consignee: [
                    { validator: checkConsignee, trigger: 'blur' }
                ],
                detailedAddress: [
                    { validator: checkDetailedAddress, trigger: 'blur' }
                ],
                phoneNumber: [
                    { validator: checkPhoneNumber, trigger: 'blur' }
                ]
            },
            deliveryInfoes: [],
            dialogVisible: false,
        }
    },
    mounted: function () {
        var _this = this;
        if ($.cookie('front-token') == null) {
            window.location.href = 'http://localhost:60861/#/Login'
        } else {
            getgGoodsInfo: {
                var token = JSON.parse($.cookie('front-token'));
                $.ajax({
                    type: "Get",
                    url: "/api/User/GetUserDeliveryInfo",
                    headers: {
                        Authorization: "Bearer " + token.access_token
                    },
                    contentType: "application/json",
                    data: {
                        userId: this.$store.state.user.userId
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data != null) {
                            _this.deliveryInfoes = data;
                        } else {
                            _this.Failed("获取失败，请检查登录信息！")
                        }

                    },
                    error: function (msg) {
                        _this.Failed("系统故障")
                    }
                });
            }
        }
    },
    methods: {
        submitForm(formName) {
            var _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var token = JSON.parse($.cookie('front-token'));
                    $.ajax({
                        type: "post",
                        url: "/api/User/AddDelivertInfo",
                        contentType: 'application/json',
                        headers: {
                            Authorization: "Bearer " + token.access_token
                        },
                        data: JSON.stringify({
                            Consignee: _this.from.consignee,
                            DetailedAddress: _this.from.detailedAddress,
                            PhoneNumber: _this.from.phoneNumber
                        }),
                        success: function (data) {
                            if (data != null) {
                                _this.Success("添加成功！")
                                _this.deliveryInfoes = data;
                                _this.dialogVisible = false;
                            } else {
                                _this.Failed("添加失败，请检查登录信息！")
                            }

                        },
                        error: function (msg) {
                            _this.Failed("系统故障")
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        Success(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'success'
            });
        },
        Failed(mes) {
            this.$message({
                showClose: true,
                message: mes,
                type: 'error'
            });
        },
        setDefault(deliverId) {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Put",
                url: "/api/User/SetDeliveryDefault",
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                data: JSON.stringify({
                    "deliverId": deliverId
                }),
                contentType: "application/json",
                success: function (data) {
                    if (data != null) {
                        _this.Success("设置成功");
                        _this.deliveryInfoes = data;
                    } else {
                        _this.Failed("设置失败，请核对登录信息");
                    }
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        },
        deleteDeliveryInfo(deliverId) {
            var _this = this;
            var token = JSON.parse($.cookie('front-token'));
            $.ajax({
                type: "Delete",
                url: "/api/User/DeleteDeliveryInfo",
                contentType: 'application/json',
                headers: {
                    Authorization: "Bearer " + token.access_token
                },
                data: JSON.stringify({
                    deliverId: deliverId
                }),
                success: function (data) {
                    if (data != null) {
                        _this.Success("删除成功！")
                        _this.deliveryInfoes = data;
                    } else {
                        _this.Failed("删除失败，请检查登录信息！")
                    }

                },
                error: function (msg) {
                    _this.Failed("系统故障")
                }
            });
        }
    }
}
</script>